<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>测试系统</title>
    <style>
        a {
            text-align: center;
            padding: 0 20px 0 20px;
            cursor: default;
            border: 1px solid #a1a1a1;
            border-radius: 10px;
            -moz-border-radius: 10px; /* 老的 Firefox */
        }

        a:hover {
            background: #dddddd;
        }
    </style>
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/plugins/jquery.caret.js"></script>
    <script type="text/javascript" src="js/plugins/jquery.cookie.js"></script>
    <script type="text/javascript" src="js/user/user.util.js"></script>
    <script type="text/javascript" src="js/util/md5.util.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#send").click(function() {
                var url = $("#url").val();
                var postData;
                try {
                    postData = jQuery.parseJSON( $("#data").val() );
                } catch ( e ) {
                    postData = {};
                }
                postData.un = getUserName();
                $.ajax(url, {
                    type: "POST",
                    data: postData,
                    dataType: "text",
                    success: function (data, textStatus, jqXHR) {
                        console.log(data + "！！！" + textStatus + "！！！" + jqXHR);
                        $("#console").val(data);
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert("有问题啦！！！" + jqXHR + "！！！" + textStatus + "！！！" + errorThrown);
                        alert(jqXHR.status);
                        alert(jqXHR.responseText);
                    }
                });
            });

            var data = $("#data");
            data.keyup(function(e) {
                var caret = data.caret();
                var val = data.val();
                var isChanged = false;
                if ( e.keyCode == 222 ) {
                    if ( e.shiftKey ) {
                        val = val.substring(0, caret) + "\"" + val.substring(caret);
                    } else {
                        val = val.substring(0, caret) + "\'" + val.substring(caret);
                    }
                    isChanged = true;
                }
                if ( e.keyCode == 219 ) {
                    if ( e.shiftKey ) {
                        val = val.substring(0, caret) + "}" + val.substring(caret);
                    } else {
                        val = val.substring(0, caret) + "]" + val.substring(caret);
                    }
                    isChanged = true;
                }
                if ( isChanged ) {
                    data.val(val);
                    data.caret(caret);
                }
            });
        });
    </script>
</head>

<body>

<textarea id="url" rows="1" cols="50">/api/v1/</textarea>
<a id="send">send</a><br><hr>
<textarea id="data" rows="5" cols="56" wrap="soft"></textarea><br>
<textarea id="console" rows="5" cols="56" readonly></textarea>
<br><hr>

</body>
</html>
